<template>
  <div class="app-container">

    <el-button type="primary" @click="append">上传图片</el-button>








    <el-carousel :interval="3000" type="card" arrow="always" height="400px" class="swiper">
        <el-carousel-item v-for="(item,index) in CrmBannerlist" :key="index">
          <el-col class="swiper-left">
            <img :src="item.imageUrl" :alt="item.title"  />
          </el-col >
        </el-carousel-item>
   </el-carousel>

    <el-tree :data="CrmBannerlist" :props="defaultProps" @node-click="onImg"></el-tree>




    <el-dialog title="轮播图" :visible.sync="dialogFormVisible">
     <el-form ref="CrmBanner" :rules="rules" :model="CrmBanner" label-width="120px">
        <el-form-item label="图片姓名" prop="title">
          <el-input v-model="CrmBanner.title"/>
        </el-form-item>
        <el-form-item label="路径" prop="linkUrl">
          <el-select v-model="CrmBanner.linkUrl" placeholder="请选择">
            <el-option label="讲师" value="/teacher"/>
            <el-option label="课程" value="/course" />
          </el-select>
        </el-form-item>
        <el-form-item label="上传图片" prop="imageUrl">
            <el-upload
              class="upload-demo"
              :action="urlImg()"
              :limit="1"
              :on-exceed="handleExceed"
              :on-success="uploadSuccess"
              :before-upload="beforeUploadBanner"
              :file-list="fileList"
              >
              <el-button size="small" type="primary">点击上传</el-button>
              <img :src="CrmBanner.imageUrl" class="itemImg" v-if="CrmBanner.imageUrl" />
            </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="onCancel">{{isRemove?"取 消":"删 除"}}</el-button>
        <el-button type="primary" @click="onSubmit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {getBannerAll,removeBanner,saveBanner,updateBanner} from '@/api/swiper'
export default {
  data() {
    return {
      CrmBanner:{},//数据
      rules:{
        title:[
          {required: true, message: '请输入图片名称', trigger: 'blur'}
        ],
        linkUrl:[
          {required: true, message: '请选择路径', trigger: 'change'}
        ],
        imageUrl:[
          {required: true, message: '请上传图片', trigger: 'blur'}
        ]
      },//判断条件
      CrmBannerlist:[],
      fileList:[],
      defaultProps:{//标签条件
        label:'title'
      },
      isNaN:true,//管理添加和修改的开关
      isRemove:true,//管理取消和删除的开关
      dialogFormVisible:false,//弹框的开关
    }
  },
  created() {
    this.getAll()
  },
  methods: {
    getAll(){
      //获取所有轮播信息
      getBannerAll().then(res=>{
         this.CrmBannerlist = res.data.list
      })
    },
    //添加和修改
    onSubmit() {
      this.$refs.CrmBanner.validate(val=>{
        if(val){
          if(this.isNaN){
            if(this.CrmBannerlist.length>7){
               this.$message.error('轮播只可以显示7张图片你可以修改或删除');
               return
            }
            saveBanner(this.CrmBanner).then(res=>{
              this.$message({
                  message: '恭喜你，添加成功消息',
                  type: 'success'
              });
              this.getAll()
            })
          }else{
            updateBanner(this.CrmBanner).then(res=>{
              this.$message({
                  message: '恭喜你，修改成功消息',
                  type: 'success'
              });
              this.getAll()
            })
          }
          this.dialogFormVisible=false
        }else{
          return false;
        }
      })

    },
    //删除和取消
    onCancel() {
      if(this.isRemove){
        this.dialogFormVisible=false
      }else{
        removeBanner(this.CrmBanner.id).then(res=>{
          this.$message({
              message: '恭喜你，删除成功',
              type: 'success'
          });
          this.getAll()
          this.dialogFormVisible=false
        })
      }

    },
    //上传路径
    urlImg(){
        return process.env.BASE_API+"/eduoss/up"
    },

    //只可以上传一张
    handleExceed(files, fileList) {
      this.$message.warning(`只可以上吃一张图片`);
    },
    //上传成功
    uploadSuccess(req,file,fileList){
      this.$message({
          message: '恭喜你，上传成功',
          type: 'success'
      });
      this.CrmBanner.imageUrl = req.data.url
    },
    //上传之前的判断
    beforeUploadBanner(file){

    	const isJpg = (file.type === 'image/jpeg')||(file.type === 'image/png');
    	if(!isJpg){
    		this.$message.error('上传图片只能是jpg和png')
    		return false;
    	}
    	const islt2M = (file.size/1024/1024)<4
    	if(!islt2M){
    		this.$message.error('上传图片不能超过4M')
    		return false;
    	}
    },
    append(){
      this.CrmBanner={
       title:"",
       linkUrl:"",
       imageUrl:""
      }
      this.isNaN=true;
      this.isRemove=true;
      this.dialogFormVisible=true;
    },
    onImg(data){
      this.CrmBanner = data
      this.isNaN=false;
      this.isRemove=false;
      this.dialogFormVisible=true;

    }
  }
}
</script>

<style scoped>
.line{
  text-align: center;
}
.swiper-left img{
  width: 100%;
  height: 25rem;
}
.itemImg{
  width: 20vw;
  height: 20vh;
}
</style>
